<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/notifications/Lobibox.min.css"/>
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/my/lobibox.js"></script>
    <script src="js/jquery.cookie.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="localization/messages_zh.min.js"></script>


</head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #eeeeee;
        }
        .navbar-text a  {
            color: #ffffff;
        }
        .login-text {
            margin-right: 50px;
        }
        .logo {
            color: #E94F4C;
            font-size: 35px;
            display: inline-block;
        }
        .search-box {
            height: 48px;
        }
        .input-group-addon {
            background-color:#E94F4C;
            border: none;
            color: #ffffff;
        }
        .control-icon {
            position: absolute;
            top: 50%;
        }
        .mgt38 {
            margin-top: 30px;
        }
        .thumbnail a img {
            height: 200px;
            width: 200px;
        }
        .thumbnail .description {
            height: 40px;
            overflow: hidden;
        }
        a:hover {
            text-decoration: none;
        }
        h3, p {
            text-align: center;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="index.html" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-sign-language"></i> 寻欢易购</a>
        </div>
<!--        <p class="navbar-text navbar-right">-->
<!--            <a href="register.html">注册</a>-->
<!--        </p>-->
    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-xs-push-3">
            <div class="panel panel-danger login-panel">
                <div class="panel-heading">
                    <!-- 面板的头部内容 -->
                    <h3 class="panel-title">用户登录</h3>
                </div>
                <div class="panel-body">
                    <form onsubmit="javascript: return false;" id="form_verdict">
                        <div class="form-group">
                            <label for="userName">用户名</label>
                            <input type="text" class="form-control" autocomplete="off" subName="true" id="userName" name="inputUserName">
                        </div>
                        <div class="form-group">
                            <label for="password">密码</label>
                            <input type="password" class="form-control" autocomplete="off" subPassword="true" id="password" name="inputPassword">

                        </div>
                        <div class="form-group">
                            <div>
                                <label for="verificationCode">验证码</label>
                            </div>
<!--                            <div>-->
                            <input   style="width: 330px;margin-right: 10px;float: left" class="form-control" autocomplete="off"  subCode="true" id="verificationCode" name="inputCode">
                                 <img src="http://localhost:8080/posterior_system_war_exploded/captcha" class="imgCode" id="codeImg" onclick="refreshCode()" />
                            </input>

<!--                            </div>-->
                        </div>



                        <div class="form-group">
                            <button type="submit" onclick="userLogin()" class="btn btn-danger btn-block">登录</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>

    var baseLoginUrl="http://localhost:8080/posterior_system_war_exploded/login/"
    var baseUrl="http://localhost:8080/posterior_system_war_exploded/"
    /**
     * 用户登录
     */
    function userLogin() {
        var userName = $('#userName').val();
        var password = $('#password').val();
        var verificationCode = $('#verificationCode').val();
        // var subUser =$('#userName').attr("subUser");
        // var subPassword = $('#password').attr("subPassword");
        // var subCode = $('#verificationCode').attr("subCode");
       // console.log(subCode);
        //console.log('/servlet/end/login');

       if(verificationCode.length==6){
           if (userName.length>5){
               if (password.length>5){
                   console.log("ajax")
                   $.ajax({
                       url: baseLoginUrl,
                       type: 'post',
                       data: {endName: userName, endPassword: password,verificationCode:verificationCode},
                       dataType: 'json',
                       success: function (_param) {
                           if(_param.code==2) {
                               /**
                                * 如果登录成功:
                                *     1. 将用户名存储在本地cookie中。
                                *     2. 同步购物车数据；
                                *     3. 跳转上次的页面
                                */
                               //  1. 将用户名存储在本地cookie中。
                               //$.cookie('frontedUsername', username);
                               //跳转到指定页面
                               //console.log(datas.data);
                               window.location.href =baseUrl+_param.data;




                           }else if(_param.code==-1) {  // 登录失败
                               refreshCode();
                               console.log(_param.msg)
                               showErrorBox(_param.msg);
                           }else if(_param.code==0) {  // 登录失败
                               refreshCode();
                               showErrorBox(_param.msg);
                           }else if(_param.code==1) {  // 登录失败
                               refreshCode();
                               showErrorBox(_param.msg);
                           }
                       }
                   })
               }else {
                   console.log(password)
                   showErrorBox("密码错误，无法提交");
               }
           }else {
               console.log(userName)
               showErrorBox("用户名错误，无法提交");
           }
       }else {
           console.log(verificationCode)
           showErrorBox("验证码错误，无法提交");
           refreshCode();
       }

    }
//刷新验证码
    function refreshCode() {
       var codUrl=baseUrl+"captcha?t="+Math.random();
        $("#codeImg").prop("src",codUrl);
    }


    // 显示错误提示信息
    function showErrorBox(msgText) {
        console.log(msgText)
        Lobibox.notify('warning', {
            size: 'mini',
            delay: 2000,
            position: 'center top',
            delayIndicator: false,
            title: false, //不给title
            msg: msgText,
            sound: false  // 不要音频
        })
    }

</script>
<script src="js/my/meValidate.js"></script>